<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .top{
            width: 100%;
            height: 50vw;
            background: gray;
        }
        .mid_top{
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 20vw;
            padding: 5vw;
        }
        .mid_mid{
           display: flex;
           /*   justify-content: space-between; */
            padding: 0 5vw;
            margin-bottom: 2vw;
        }
        .mid_mid img{
            width: 25vw;
            height: 25vw;
        }
        .mid_mid .news_left{
            width: 30vw;
            height: 25vw;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            /* background: blue; */
            padding-left: 5vw;
        }
        .mid_mid .news_left span{
            color: red;
            font-size: 5vw;
        }
        .mid_mid .news_left span del{
            color: grey;
            font-size: 3vw;
        }
        .mid_mid .news_right{
            display: flex;
            justify-content: end;
            align-items: flex-end;
            width: 35vw;
            height: 25vw;
            /* background: gold; */
        }
        .mid_mid .news_right span:nth-child(2n-1){
            display: inline-block;
            width: 5vw;
            height: 5vw;
            background: aqua;
            border-radius: 2.5vw;
            text-align: center;
        }
        .mid_mid .news_right span:nth-child(2n){
            padding: 0 2vw;
        }
        .end{
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 20vw;
            background: black;
            opacity: 0.5;
            padding: 3vw 2vw 0 15vw;
            position: absolute;
            bottom: 0;
        }
        .end div h4{
            color: white;
            font-size: 7vw;
        }
        .end div h4 del{
            color: grey;
            font-size: 5vw;
        }
        .end div p{
            color: grey;
            font-size: 3vw;
        }
        .end input{
            width: 30vw;
            height: 10vw;
            background: green;
            color: white;
            font-weight: bold;
            outline: none;
            border: none;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="top"></div>
        <div class="mid_top">
            <h3>已选商品</h3>
            <span @click="clear()">清空</span>
        </div>
        <div v-for="(item,index) in list" class="mid_mid">
            <img :src="item.jpg" alt="">
            <div class="news_left">
                <h4>{{item.goods}}</h4>
                <span>￥{{item.price}} <del>￥{{item.delPrice}}</del> </span>
            </div>
            <div class="news_right">
                <span @click="sub(item)">-</span>
                <span>{{item.count}}</span>
                <span @click="add(item)">+</span>
            </div>
        </div>
        <div class="end">
            <div>
                <h4>￥{{allPrice}} <del>￥{{delallPrice}}</del></h4>
                <p>另需要配送费35元</p>
            </div>
            <input type="button" value="去结算">
        </div>

    </div>
</body>
</html>
<script src="../vue-2.5.21.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            list:[
                {jpg:'img/2.JPG',goods:'秋刀鱼',price:35.00,delPrice:36,count:'1'},
                {jpg:'img/3.JPG',goods:'大带鱼',price:45.00,delPrice:50,count:'1'},
                {jpg:'img/2.JPG',goods:'皮皮虾',price:85.00,delPrice:86,count:'1'}
            ]
        },
        methods:{
            sub(item){
                if (item.count>1) {
                    item.count--
                }
            },
            add(item){
                if (item.count<5) {
                    item.count++
                }
            },
            clear(){
                this.list=null
            }
        },
        computed:{
            allPrice(){
                let aPrice = 0
                this.list.forEach(item =>{
                    aPrice+=item.price*item.count
                });
                return aPrice
            },
            delallPrice(){
                let daPrice = 0
                this.list.forEach(item => {
                    daPrice+= item.count*item.delPrice
                });
                return daPrice
            }
        }
    })
</script>